<template>
	<view class="evaluate">
		<view class="h1">您对本次服务满意吗？</view>
		<view class="v1">
			<view class="v1-1">
				<image src="https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg"></image>
				<view class="v1-2">
					<view class="v1-2-1">助医服务</view>
					<view class="v1-2-2">￥38</view>
				</view>
			</view>
		</view>
		<view class="v2">
			<!-- <uni-rate v-model="value" @change="onChange" :size="18" :value="5" :margin="20" color="#b2b2b2" active-color="#F8C959"/> -->
			<view class="v2-1">
				{{evaluate()}}
			</view>
			<view class="v2-2">
				<u-rate :current="current" active-color="#F8C959" active-icon="star-fill" inactive-icon="star-fill"
					inactive-color="#b2b2b2" gutter="20" size="50" v-model="value"></u-rate>
			</view>

		</view>
		<view class="v3">
			<swiper class="swiper" mode="rect" indicator-pos="bottomRight" :autoplay='autoplay' circular="true"
				indicator-color="#d9d9d9" indicator-active-color="#3774EC">
				<swiper-item>
					<view>
						<view class="swiper1">请问本次服务时长</view>
						<view class="swiper1-1">
							<view @click="show(1)" class="bctive" :class="sel==1?'active':''">小于1小时</view>
							<view @click="show(2)" class="bctive" :class="sel==2?'active':''">大于1小时</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view>
						<view class="swiper1">请问对陪护员是否满意？</view>
						<view class="swiper1-1">
							<view @click="show(3)" class="bctive" :class="sel==3?'active':''">满意</view>
							<view @click="show(4)" class="bctive" :class="sel==4?'active':''">不满意</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view>
						<view class="swiper1">请问对助医服务是否满意？</view>
						<view class="swiper1-1">
							<view @click="show(5)" class="bctive" :class="sel==5?'active':''">满意</view>
							<view @click="show(6)" class="bctive" :class="sel==6?'active':''">不满意</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view>
						<view class="swiper1">请问对助医服务是否满意？</view>
						<view class="swiper1-1">
							<view @click="show(7)" class="bctive" :class="sel==7?'active':''">满意</view>
							<view @click="show(8)" class="bctive" :class="sel==8?'active':''">不满意</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="v4">
			<textarea placeholder="请输入评价内容..." />
		</view>
		<view class="v5">
			<u-upload :action="action" :file-list="fileList" :upload-text='uploadtext'
				style="width: 200rpx;height: 200rpx;"></u-upload>
		</view>
		<view class="v6">
			<u-button type="primary" size="default">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				current: 3,
				value: 3,
				sel:0,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: false,
				uploadtext: '上传图片',

			}
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			duratonChange(e) {
				this.duration = e.target.value
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			},
			evaluate() {
				switch (this.value) {
					case 0:
						return "差"
						break;
					case 1:
						return "差"
						break;
					case 2:
						return "较差"
						break;
					case 3:
						return "一般"
						break;
					case 4:
						return "满意"
						break;
					case 5:
						return "非常满意"
						break;
				}
			},
			show(a){
				this.sel=a;
				console.log(a)
			}
		}
	}
</script>

<style lang="less" scoped>
	.evaluate {

		.h1 {
			color: #555;
			font-size: 32rpx;
			font-weight: 600;
			width: 710rpx;
			text-align: center;
			margin: 35rpx 0;
		}

		.v1 {
			margin: 0 auto;
			width: 710rpx;
			height: 136rpx;
			background: #fafafa;

			.v1-1 {
				display: flex;
				justify-content: space-around;
				width: 272rpx;
				height: 136rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					// border-radius: 50%;
					margin: auto 0;
				}
			}

			.v1-2 {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.v1-2-2 {
					color: #FF6600;
				}
			}
		}

		.v2 {
			text-align: center;
			width: 100%;
			height: 136rpx;
			line-height: 80rpx;
			margin-top: 20rpx;
		}

		.v3 {
			width: 710rpx;
			height: 200rpx;
			margin: 0 auto;
			border: 1px solid #fafafa;
			border-radius: 4rpx;
			box-shadow: 1rpx 1rpx 5rpx;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}

		.v4 {
			width: 710rpx;
			height: 250rpx;
			background: #fafafa;
			margin: 0 auto;
			padding-top: 35rpx;
			padding-left: 20rpx;
		}

		.v6 {
			margin: 20rpx auto;
			width: 710rpx;
		}
	}

	.swiper1-1 {
		display: flex;
		justify-content: space-around;

		view {
			width: 170rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 20rpx;
		}
	}

	.swiper1 {
		margin-top: 30rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.bctive {
		background: #EEEEEE;
	}

	.active {
		background: #3774EC;
	}
</style>
